<template>
	<view class="p_re">
		<u-navbar title=" " :bgColor="bgColor" :autoBack="true"></u-navbar>
		<view class="">
			<image
				class="w"
				style="height: 486rpx;"
				src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221023/d407cbc6db2ec2dc820f78eee331cd43.png"
				mode="aspectFill"
			></image>
		</view>
		<view class="bac_f w p_ab pt60 radius_6" style="top: 400rpx;">
			<view class="dis_f ml54">
				<image class="w44" style="height: 44rpx;" src="../../static/image/feed_q.png" mode=""></image>
				<view class="ml16 fz28 fw tf_22">请输入您要反馈的问题：</view>
			</view>
			<view class="">
				<view class="mr54 ml54 pl40 pr40 pt30 mt24 bac_f8 textarea radius12" style="height: 400rpx;">
					<u--textarea border="none" v-model="otherTextarea" placeholder="请输入内容" autoHeight count @focus="focus"></u--textarea>
				</view>
			</view>
			<view class="dis_f ml54 mt30">
				<image class="w44" style="height: 44rpx;" src="../../static/image/feed_q.png" mode=""></image>
				<view class="ml16 fz28 fw tf_22">请输入您要反馈的问题：</view>
			</view>
			<view class="ml54 mr54 mt24">
				<view class="dis_f">
					<view v-if="video_show" class="p_re">
						<video :src="fullurl" style="width: 200rpx; height: 200rpx;"></video>
						<image @click="delVideo" src="../../static/image/del_v.png" class="w50 h50 p_ab" style="top:0;right: 0;" mode="aspectFill"></image>
					</view>
					<view v-else class="">
						<u-upload :fileList="fileList1" @afterRead="afterReadVideo" @delete="deletePicVideo" name="1" accept="video" :maxCount="1" width="100" height="100">
							<image src="../../static/video.png" mode="widthFix" style="width: 200rpx;height: 200rpx;"></image>
						</u-upload>
					</view>
				</view>
				<view class="mt18">
					<u-upload :fileList="fileList2" @afterRead="afterReadImg" @delete="deletePicImg" name="2" accept="image" multiple :maxCount="9" width="100" height="100">
						<image src="../../static/uimg.png" mode="widthFix" style="width: 200rpx;height: 200rpx;"></image>
					</u-upload>
				</view>
			</view>
			<view class="h200 w"></view>
		</view>
		<view class="dis_f jc p_f h136 w bac_f bs4">
			<view class=""><view class="w690 btn1 radius8 tf h88 dis_f jc fz32" :class="{ btn: is_active }" @click="subFeedback">提交</view></view>
		</view>
	</view>
</template>

<script>
import { feedback, upload } from '@/config/api.js';
feedback;
export default {
	data() {
		return {
			is_active: 0,
			fullurl:'',
			video_show:false,
			fileList2: [],
			video_url: '',
			fileList1: [],
			otherTextarea: '',
			bgColor: 'rgba(255,255,255,0)'
		};
	},
	onLoad() {},
	methods: {
		// 删除视频
		delVideo() {
			this.fullurl = ''
			this.video_show=false
		},
		//上传视频
		async afterReadVideo(event) {
			console.log(event);
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			console.log('lists',lists);
			let fileListLen = this[`fileList${event.name}`].length;
			console.log('flists',fileListLen);
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				console.log('res',result);
				
				let item = this[`fileList${event.name}`][fileListLen];
				console.log('item',item);
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://hmj-dev.cy1015.com/api/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							console.log('上传成功信息', res);
							console.log('Josn', JSON.parse(res.data));
							this.video_url = JSON.parse(res.data).data.url
							this.fullurl = JSON.parse(res.data).data.fullurl
							this.video_show = true
							resolve(res.data.data);
						}, 1000);
					}
				});
			});
		},

	// 删除图片
	deletePicImg(event) {
		this[`fileList${event.name}`].splice(event.index, 1);
	},
	//上传视频
	async afterReadImg(event) {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = this[`fileList${event.name}`].length;
		lists.map(item => {
			this[`fileList${event.name}`].push({
				...item,
				status: 'uploading',
				message: '上传中'
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await this.uploadFilePromiseImg(lists[i].url);
			let item = this[`fileList${event.name}`][fileListLen];
			this[`fileList${event.name}`].splice(
				fileListLen,
				1,
				Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				})
			);
			fileListLen++;
		}
	},
	uploadFilePromiseImg(url) {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'https://hmj-dev.cy1015.com/api/common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test'
				},
				success: res => {
					setTimeout(() => {
						console.log('上传成功信息', res);
						console.log('Josn', JSON.parse(res.data));
						resolve(JSON.parse(res.data));
					}, 1000);
				}
			});
		});
	},
	
	
	
		focus() {
			this.is_active = 1;
			console.log(2222);
		},
		// 提交意见反馈
		subFeedback() {
			let images = [];
			if (this.otherTextarea.length == 0) {
				uni.showModal({
					title: '提示',
					content: '请填写内容'
				});
			} else {
				console.log(this.fileList2);
				this.fileList2.forEach((v, i) => {
					images.push(v.url.data.url);
				});
				let images_s = images.toString();
				feedback({ text: this.otherTextarea, images: images_s,video:this.video_url }).then(res => {
					console.log(res);
					uni.showModal({
						title: '提示',
						content: '提交成功',
						success() {
							uni.switchTab({
								url: '/pages/user/user'
							});
						}
					});
				});
			}
		},
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f8f8f8;
}
.btn {
	background-image: linear-gradient(#fe2e27, #fe877f);
}
.textarea {
	/deep/ .u-textarea {
		background-color: #f8f8f8;
		height: 300rpx;
		.u-textarea__count {
			background-color: #f8f8f8 !important;
		}
	}
}
</style>
